<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-loading="loading">
        <el-tabs :stretch="true">
            <el-tab-pane label="基础">
                <!-- el-form-item label="选择文章">
          <el-radio v-model="module.news_from" label="news_ids"
            >直接选择文章</el-radio
          >
          <el-radio v-model="module.news_from" label="cat_ids"
            >使用筛选条件</el-radio
          >
        </el-form-item -->
                <transfer :titles="['待选文章', '已选文章']" :data="items" v-model="module.ids"
                    :props="{ key: 'id', label: 'title' }"></transfer>
            </el-tab-pane>
            <el-tab-pane label="标题">
                <header-editor :module="module.header" />
            </el-tab-pane>
            <el-tab-pane label="样式">
                <el-form-item label="风格">
                    <ul class="style-items">
                        <li @click="styleChangeHandle(item.value)" :class="{
                            'style-item': true,
                            active: module.styleName == item.value,
                        }" v-for="item in styleItems">
                            <el-image :src="require('@/assets/images/pagemaker/posts-style/' +
                                item.name +
                                '.png')
                                "></el-image>
                        </li>
                    </ul>
                </el-form-item>

                <module-style-editor :module="module" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import Transfer from "@/components/Transfer";
import ModuleStyleEditor from "./ModuleStyleEditor/Index";
import HeaderEditor from "./base/HeaderEditor";
import { getNewsList } from "@/api/news";

export default {
    components: {
        Transfer,
        HeaderEditor,
        ModuleStyleEditor,
    },
    props: {
        module: { type: Object },
    },
    data () {
        return {
            ids: [],
            items: [],
            loading: false,
            styleItems: [
                { name: "style-0", value: 0 },
                { name: "style-1", value: 1 },
            ],

            activeTab: "base",
        };
    },
    mounted: function () {
        this.loadData();
    },

    methods: {
        styleChangeHandle: function (val) {
            this.$set(this.module, "styleName", val);
        },

        loadData: function () {
            this.loading = true;
            var params = { simple_list: true };
            getNewsList(params).then((res) => {
                this.loading = false;
                if (res.status != 0) {
                    return false;
                }
                this.items = res.data.result;
            });
        },
    },
};
</script>

<style scoped>
.style-items {
    margin: 10px 0 10px 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    user-select: none;
}

.style-items .style-item {
    width: 120px;
    box-shadow: 0 2px 17px 3px rgba(207, 221, 213, 0.35);
    border-radius: 3px;
    border: 1px solid #f1f1f1;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.style-items .style-item:nth-child(2n) {
    margin-right: 0;
}

.style-items .style-item:hover {
    box-shadow: 0 2px 17px 3px rgba(207, 221, 213, 0.6);
}

.style-items .style-item.active {
    border: 1px solid #1989fa;
    box-shadow: none;
}

.styles {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.styles li {
    width: 100px;
    height: 80px;
    border: 1px solid #fff;
    border-radius: 10px;
    margin-right: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-content: center;
}

.styles li:hover {
    border: 1px solid #f4f4f4;
}

.styles li.active {
    border: 1px solid #1989fa;
}
</style>